<template>
  <div class="news">
    <!-- 导航栏 -->
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="main">
      <van-cell title="修改密码" is-link @click="onPassword"> </van-cell>

      <van-cell title="注销账号" is-link @click="Accountwindow">
        <van-overlay :show="showAccount">
          <div class="wrapper">
            <div class="block" @click.stop>
              <div class="text">确定要注销账号？一旦注销无法恢复！</div>

              <!-- 取消、确认 -->
              <div class="btn">
                <div class="btnbox return" @click="showAccount = false">
                  算了
                </div>
                <div class="btnbox out" @click="onAccount">是滴</div>
              </div>
            </div>
          </div>
        </van-overlay>
      </van-cell>

      <van-cell title="退出登录" is-link @click="onOverlay">
        <van-overlay :show="show">
          <div class="wrapper">
            <div class="block" @click.stop>
              <div class="img">
                <img src="../assets/my/cry.svg" alt="" />
              </div>

              <!-- 取消、确认 -->
              <div class="btn">
                <div class="btnbox return" @click="show = false">点错了</div>
                <div class="btnbox out" @click="getLogout">狠心离开</div>
              </div>
            </div>
          </div>
        </van-overlay>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  name: "Setup",

  data() {
    return {
      // 是否显示修改密码页面
      showPassword: false,

      // 是否显示注销账号页面
      showAccount: false,

      //是否显示确认注销窗口
      showAccount: false,

      //是否显示确认退出窗口
      show: false,
    };
  },

  methods: {
    // 返回
    onClickLeft() {
      this.$router.push({ name: "My" });
    },

    //打开修改密码页面
    onPassword() {
      this.$router.push({ name: "Password" });
    },

    //打开注销账号页面
    onAccount() {
      this.$router.push({ name: "Account" });
    },

    //打开确认注销窗口
    Accountwindow() {
      this.showAccount = true;
    },

    //打开确认退出登录窗口
    onOverlay() {
      this.show = true;
    },

    //退出登录
    getLogout() {
      this.axios({
        method: "post",
        url: "/logout",
      })
        .then((res) => {
          // 

          sessionStorage.clear();
          this.$router.push({ name: "Home" });
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

/deep/.van-nav-bar__title {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #37343b;
}

.main {
  width: 100%;
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

/deep/.van-cell__title,
.van-cell__value {
  color: #37343b;
  font-weight: 600;
}

// 确认退出登录窗口
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 200px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 10px;
}

.btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.btnbox {
  width: 90px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  &.out {
    background-color: #454249;
  }
  &.return {
    background-color: rgb(240, 189, 96);
  }
}

.img {
  width: 100px;
  height: 100px;
  padding: 10px 10px 16px 10px;
  position: relative;
  left: 40px;
}

.img img {
  width: 100px;
  height: 100px;
}

.text {
  width: 100%;
  padding: 0 10px 16px 10px;
  text-align: center;
}
</style>